<script setup>
import { ref } from 'vue'

// 最新赛事信息
const latestTournaments = ref([
  {
    id: 1,
    title: '2024和平精英全球总决赛',
    date: '2024-12-10 至 2024-12-20',
    location: '上海梅赛德斯奔驰文化中心',
    description: '年度最高级别赛事，全球顶尖战队巅峰对决，冠军奖金高达1000万元！',
    imageUrl: '/src/assets/pubg-images/pubg-esports-tournament.svg',
    status: 'upcoming'
  },
  {
    id: 2,
    title: '2024和平精英职业联赛夏季赛',
    date: '2024-07-05 至 2024-08-25',
    location: '线上赛+线下总决赛',
    description: '国内顶级职业联赛，16支战队争夺夏季赛冠军宝座和高额奖金池。',
    imageUrl: '/src/assets/pubg-images/pubg-esports-tournament.svg',
    status: 'ongoing'
  },
  {
    id: 3,
    title: '和平精英亚洲邀请赛',
    date: '2024-05-15 至 2024-05-25',
    location: '新加坡',
    description: '亚洲区域顶级赛事，汇集中日韩及东南亚各国顶尖战队。',
    imageUrl: '/src/assets/pubg-images/pubg-esports-tournament.svg',
    status: 'completed'
  }
])

// 赛事日历
const tournamentCalendar = ref([
  {
    date: '2024-07-15',
    events: [
      { time: '14:00', match: 'Team A vs Team B', type: '常规赛' },
      { time: '16:00', match: 'Team C vs Team D', type: '常规赛' },
      { time: '18:00', match: 'Team E vs Team F', type: '常规赛' }
    ]
  },
  {
    date: '2024-07-16',
    events: [
      { time: '14:00', match: 'Team G vs Team H', type: '常规赛' },
      { time: '16:00', match: 'Team I vs Team J', type: '常规赛' },
      { time: '18:00', match: 'Team K vs Team L', type: '常规赛' }
    ]
  },
  {
    date: '2024-07-20',
    events: [
      { time: '15:00', match: '季后赛第一轮', type: '季后赛' },
      { time: '19:00', match: '季后赛第二轮', type: '季后赛' }
    ]
  }
])

// 战队排名
const teamRankings = ref([
  { rank: 1, teamName: '4AM', points: 3200, winRate: '45%', logoUrl: '/src/assets/pubg-images/team-logo.svg' },
  { rank: 2, teamName: 'Tianba', points: 3050, winRate: '42%', logoUrl: '/src/assets/pubg-images/team-logo.svg' },
  { rank: 3, teamName: 'AG', points: 2980, winRate: '39%', logoUrl: '/src/assets/pubg-images/team-logo.svg' },
  { rank: 4, teamName: 'SMG', points: 2850, winRate: '36%', logoUrl: '/src/assets/pubg-images/team-logo.svg' },
  { rank: 5, teamName: 'LGD', points: 2720, winRate: '35%', logoUrl: '/src/assets/pubg-images/team-logo.svg' }
])

// 赛事新闻
const tournamentNews = ref([
  {
    id: 1,
    title: '4AM战队夺得亚洲邀请赛冠军，创造历史',
    date: '2024-05-26',
    summary: '在激烈的决赛中，4AM战队凭借出色的团队配合和个人能力，以总分第一的成绩夺得冠军。',
    imageUrl: '/src/assets/pubg-images/pubg-esports-tournament.svg'
  },
  {
    id: 2,
    title: '和平精英全球总决赛分组出炉，16支战队将展开巅峰对决',
    date: '2024-06-10',
    summary: '官方公布了全球总决赛的分组情况，16支来自世界各地的顶尖战队将分为4个小组进行比赛。',
    imageUrl: '/src/assets/pubg-images/pubg-esports-tournament.svg'
  },
  {
    id: 3,
    title: '夏季赛规则大改，新增积分赛制引热议',
    date: '2024-06-15',
    summary: '官方宣布夏季赛将采用全新的积分赛制，更加注重战队的稳定性和战术多样性。',
    imageUrl: '/src/assets/pubg-images/pubg-esports-tournament.svg'
  }
])

// 响应式变量
const hoveredTournament = ref(null)
const hoveredTeam = ref(null)

// 获取赛事状态文本
const getStatusText = (status) => {
  const statusMap = {
    upcoming: '即将开始',
    ongoing: '进行中',
    completed: '已结束'
  }
  return statusMap[status] || status
}

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const weekday = ['日', '一', '二', '三', '四', '五', '六'][date.getDay()]
  return `${year}年${month}月${day}日 星期${weekday}`
}
</script>

<style scoped>
.tournaments-view {
  position: relative;
  padding: 2rem 0;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--bg-color) 0%, var(--bg-secondary) 100%);
  overflow-x: hidden;
}

.tournaments-bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 20% 40%, rgba(240, 103, 62, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(240, 103, 62, 0.05) 0%, transparent 40%),
    repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(240, 103, 62, 0.02) 10px, rgba(240, 103, 62, 0.02) 20px);
  z-index: 0;
  pointer-events: none;
}

.container {
  position: relative;
  z-index: 1;
}

.page-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--text-primary);
  margin-bottom: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  position: relative;
}

.title-decoration {
  display: inline-block;
  width: 3rem;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

.section-title {
  font-size: 1.75rem;
  font-weight: bold;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  margin-top: 3rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  padding-left: 1rem;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.5rem;
  height: 1.5rem;
  background: var(--primary-color);
  border-radius: 0.25rem;
}

.title-icon {
  font-size: 1.5rem;
}

/* 最新赛事样式 */
.latest-tournaments {
  margin-bottom: 2rem;
}

.tournament-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.tournament-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 1rem;
  overflow: hidden;
  transition: all 0.4s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.tournament-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.2);
}

.tournament-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tournament-image-container {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.tournament-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.5s ease;
}

.image-hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.tournament-status {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-weight: bold;
  font-size: 0.9rem;
  z-index: 2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tournament-status.upcoming {
  background: #3498db;
  color: white;
}

.tournament-status.ongoing {
  background: #27ae60;
  color: white;
  animation: pulse 2s infinite;
}

.tournament-status.completed {
  background: #7f8c8d;
  color: white;
}

.tournament-info {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tournament-title {
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--primary-color);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.tournament-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.meta-icon {
  font-size: 1.1rem;
}

.tournament-description {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex: 1;
}

.tournament-btn {
  align-self: flex-start;
}

/* 赛事日历样式 */
.calendar-section {
  margin-bottom: 2rem;
}

.tournament-calendar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.calendar-day {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.calendar-day:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.day-header {
  background: linear-gradient(135deg, var(--primary-color), #ff7a45);
  padding: 1rem 1.5rem;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.day-date {
  font-size: 1.1rem;
  font-weight: bold;
  margin: 0;
}

.day-indicator {
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  opacity: 0.8;
}

.day-events {
  padding: 1rem 1.5rem;
}

.event-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
}

.event-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(5px);
}

.event-item.highlight {
  border-left-color: var(--accent-color);
  background: rgba(231, 76, 60, 0.1);
}

.event-time {
  font-weight: bold;
  color: var(--primary-color);
  min-width: 50px;
  text-align: center;
  padding: 0.25rem 0.5rem;
  background: rgba(240, 103, 62, 0.1);
  border-radius: 0.25rem;
}

.event-info {
  flex: 1;
}

.event-match {
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.event-type {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.event-btn {
  padding: 0.25rem 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.25rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.event-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
}

/* 战队排名样式 */
.rankings-section {
  margin-bottom: 2rem;
}

.rankings-container {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 1rem;
  overflow: hidden;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.rankings-table-wrapper {
  overflow-x: auto;
}

.rankings-table {
  width: 100%;
  border-collapse: collapse;
}

.table-header {
  background: linear-gradient(90deg, rgba(240, 103, 62, 0.2), rgba(44, 62, 80, 0.2));
}

.table-header th {
  padding: 1.25rem 1rem;
  text-align: left;
  color: var(--text-primary);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.team-row {
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.team-row:hover,
.team-row.hover-row {
  background: rgba(255, 255, 255, 0.05);
  transform: scale(1.01);
}

.team-row.top-three {
  background: rgba(255, 215, 0, 0.05);
}

.team-row.first-place {
  background: rgba(255, 215, 0, 0.1);
}

.team-row td {
  padding: 1rem;
  color: var(--text-secondary);
}

.rank-cell {
  width: 80px;
}

.rank-content {
  position: relative;
  display: inline-block;
}

.rank-number {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--text-primary);
}

.team-row.top-three .rank-number {
  color: var(--primary-color);
}

.rank-medal {
  position: absolute;
  top: -10px;
  right: -15px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.medal-1 {
  background: radial-gradient(circle, #FFD700, #FFA500);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.medal-2 {
  background: radial-gradient(circle, #C0C0C0, #A9A9A9);
}

.medal-3 {
  background: radial-gradient(circle, #CD7F32, #8B4513);
}

.team-cell {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.team-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  object-fit: cover;
}

.team-name {
  font-weight: 500;
  color: var(--text-primary);
}

.points-display {
  display: flex;
  flex-direction: column;
}

.points-value {
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--primary-color);
}

.points-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.winrate-display {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.winrate-bar {
  flex: 1;
  max-width: 100px;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.winrate-progress {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-color), #ff7a45);
  border-radius: 4px;
  transition: width 0.5s ease;
}

.winrate-value {
  font-weight: bold;
  color: var(--text-primary);
  min-width: 40px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }
  
  .title-decoration {
    width: 2rem;
  }
  
  .section-title {
    font-size: 1.5rem;
    margin-top: 2.5rem;
  }
  
  .tournament-cards {
    grid-template-columns: 1fr;
  }
  
  .tournament-calendar {
    grid-template-columns: 1fr;
  }
  
  .tournament-image-container {
    height: 180px;
  }
  
  .table-header th {
    padding: 1rem 0.75rem;
    font-size: 0.8rem;
  }
  
  .team-row td {
    padding: 0.75rem;
  }
  
  .team-logo {
    width: 35px;
    height: 35px;
  }
}

@media (max-width: 480px) {
  .tournaments-view {
    padding: 1rem 0;
  }
  
  .page-title {
    font-size: 1.75rem;
    gap: 0.5rem;
  }
  
  .section-title {
    font-size: 1.35rem;
    padding-left: 0.75rem;
  }
  
  .tournament-info {
    padding: 1.25rem;
  }
  
  .tournament-title {
    font-size: 1.25rem;
  }
  
  .event-item {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .event-actions {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  
  .winrate-display {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  
  .winrate-bar {
    max-width: 80px;
  }
}
</style>

<template>
  <div class="tournaments-view">
    <!-- 背景装饰 -->
    <div class="tournaments-bg-decoration"></div>
    
    <div class="container">
      <h1 class="page-title">
        <span class="title-decoration"></span>
        赛事资讯
        <span class="title-decoration"></span>
      </h1>
      
      <!-- 最新赛事 -->
      <section class="latest-tournaments">
        <h2 class="section-title">
          <span class="title-icon">🏆</span>
          最新赛事
        </h2>
        <div class="tournament-cards">
          <div 
            v-for="tournament in latestTournaments"
            :key="tournament.id"
            class="tournament-card card card-shadow animate-fade-in"
            @mouseenter="hoveredTournament = tournament.id"
            @mouseleave="hoveredTournament = null"
          >
            <div class="tournament-card-inner">
              <div class="tournament-image-container">
                <img 
                  :src="tournament.imageUrl" 
                  :alt="tournament.title" 
                  class="tournament-image"
                  :class="{ 'image-hover': hoveredTournament === tournament.id }"
                />
                <div class="tournament-status" :class="tournament.status">
                  {{ getStatusText(tournament.status) }}
                </div>
              </div>
              <div class="tournament-info">
                <h3 class="tournament-title">{{ tournament.title }}</h3>
                <div class="tournament-meta">
                  <div class="meta-item">
                    <span class="meta-icon">📅</span>
                    {{ tournament.date }}
                  </div>
                  <div class="meta-item">
                    <span class="meta-icon">📍</span>
                    {{ tournament.location }}
                  </div>
                </div>
                <p class="tournament-description">{{ tournament.description }}</p>
                <button class="tournament-btn btn-primary">查看详情</button>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 赛事日历 -->
      <section class="calendar-section">
        <h2 class="section-title">
          <span class="title-icon">📅</span>
          赛事日历
        </h2>
        <div class="tournament-calendar">
          <div 
            v-for="(day, index) in tournamentCalendar"
            :key="index"
            class="calendar-day card card-shadow animate-slide-in-left"
            :style="{ animationDelay: `${index * 100}ms` }"
          >
            <div class="day-header">
              <h3 class="day-date">{{ formatDate(day.date) }}</h3>
              <div class="day-indicator"></div>
            </div>
            <div class="day-events">
              <div 
                v-for="(event, eventIndex) in day.events"
                :key="eventIndex"
                class="event-item"
                :class="{ 'highlight': event.type === '季后赛' }"
              >
                <div class="event-time">{{ event.time }}</div>
                <div class="event-info">
                  <div class="event-match">{{ event.match }}</div>
                  <div class="event-type">{{ event.type }}</div>
                </div>
                <div class="event-actions">
                  <button class="event-btn">提醒</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 战队排名 -->
      <section class="rankings-section">
        <h2 class="section-title">
          <span class="title-icon">🏅</span>
          战队排名
        </h2>
        <div class="rankings-container card card-shadow">
          <div class="rankings-table-wrapper">
            <table class="rankings-table">
              <thead>
                <tr class="table-header">
                  <th class="rank-header">排名</th>
                  <th class="team-header">战队</th>
                  <th class="points-header">积分</th>
                  <th class="winrate-header">胜率</th>
                </tr>
              </thead>
              <tbody>
                <tr 
                  v-for="team in teamRankings"
                  :key="team.rank"
                  class="team-row"
                  :class="{
                    'top-three': team.rank <= 3,
                    'first-place': team.rank === 1,
                    'hover-row': hoveredTeam === team.rank
                  }"
                  @mouseenter="hoveredTeam = team.rank"
                  @mouseleave="hoveredTeam = null"
                >
                  <td class="rank-cell">
                    <div class="rank-content">
                      <span class="rank-number">{{ team.rank }}</span>
                      <div v-if="team.rank <= 3" class="rank-medal" :class="`medal-${team.rank}`"></div>
                    </div>
                  </td>
                  <td class="team-cell">
                    <img :src="team.logoUrl" :alt="team.teamName" class="team-logo">
                    <span class="team-name">{{ team.teamName }}</span>
                  </td>
                  <td class="points-cell">
                    <div class="points-display">
                      <span class="points-value">{{ team.points }}</span>
                      <span class="points-label">积分</span>
                    </div>
                  </td>
                  <td class="winrate-cell">
                    <div class="winrate-display">
                      <div class="winrate-bar">
                        <div class="winrate-progress" :style="{ width: team.winRate }"></div>
                      </div>
                      <span class="winrate-value">{{ team.winRate }}</span>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </section>
      
      <!-- 赛事新闻 -->
      <section class="news-section">
        <h2 class="section-title">赛事新闻</h2>
        <div class="news-grid">
          <div 
            v-for="news in tournamentNews"
            :key="news.id"
            class="news-card"
          >
            <div class="news-image" :style="{ backgroundImage: `url(${news.imageUrl})` }"></div>
            <div class="news-content">
              <div class="news-date">{{ news.date }}</div>
              <h3 class="news-title">{{ news.title }}</h3>
              <p class="news-summary">{{ news.summary }}</p>
              <a href="#" class="news-link">阅读全文 →</a>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 观赛指南 -->
      <section class="guide-section">
        <h2 class="section-title">观赛指南</h2>
        <div class="guide-content">
          <div class="guide-item">
            <h3>如何观看比赛直播？</h3>
            <p>和平精英官方赛事将在多个平台同步直播，包括：官方网站、虎牙直播、斗鱼直播、企鹅电竞等。您可以通过这些平台观看高清直播，还可以参与互动活动赢取精美周边。</p>
          </div>
          <div class="guide-item">
            <h3>赛事规则解析</h3>
            <p>了解比赛规则有助于更好地欣赏比赛。和平精英赛事通常采用积分赛制，每场比赛根据排名和淘汰数获得相应积分，多场比赛累积总分决定最终排名。</p>
          </div>
          <div class="guide-item">
            <h3>专业术语解释</h3>
            <p>观赛过程中可能会听到一些专业术语，如：天命圈、中心点、劝架、绕后等。熟悉这些术语可以帮助您更好地理解解说和比赛进程。</p>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    getStatusText(status) {
      const statusMap = {
        upcoming: '即将开始',
        ongoing: '进行中',
        completed: '已结束'
      }
      return statusMap[status] || status
    },
    formatDate(dateString) {
      // 简单的日期格式化
      const date = new Date(dateString)
      const year = date.getFullYear()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      return `${year}-${month}-${day}`
    }
  }
}
</script>

<style scoped>
.tournaments-view {
  padding: 2rem 0;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.page-title {
  font-size: 2.5rem;
  color: var(--color-pubg-primary);
  text-align: center;
  margin-bottom: 2rem;
}

.section-title {
  font-size: 1.8rem;
  color: var(--color-heading);
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 0.5rem;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 3px;
  background-color: var(--color-pubg-primary);
}

.latest-tournaments {
  margin-bottom: 3rem;
}

.tournament-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 2rem;
}

.tournament-card {
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tournament-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.tournament-image {
  height: 200px;
  background-size: cover;
  background-position: center;
}

.tournament-info {
  padding: 1.5rem;
}

.tournament-status {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.8rem;
}

.tournament-status.upcoming {
  background-color: #3498db;
  color: white;
}

.tournament-status.ongoing {
  background-color: #27ae60;
  color: white;
}

.tournament-status.completed {
  background-color: #95a5a6;
  color: white;
}

.tournament-title {
  font-size: 1.5rem;
  color: var(--color-heading);
  margin-bottom: 1rem;
}

.tournament-meta {
  margin-bottom: 1rem;
}

.meta-item {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}

.icon-calendar::before {
  content: '📅';
  margin-right: 0.5rem;
}

.icon-location::before {
  content: '📍';
  margin-right: 0.5rem;
}

.tournament-description {
  color: var(--color-text);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.tournament-btn {
  background-color: var(--color-pubg-primary);
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.tournament-btn:hover {
  background-color: var(--color-pubg-primary-dark);
}

.calendar-section {
  margin-bottom: 3rem;
}

.tournament-calendar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.calendar-day {
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.day-header {
  background-color: var(--color-pubg-primary);
  color: white;
  padding: 1rem;
  text-align: center;
}

.day-header h3 {
  margin: 0;
  font-size: 1.2rem;
}

.day-events {
  padding: 1rem;
}

.event-item {
  display: flex;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.event-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.event-time {
  min-width: 80px;
  font-weight: 500;
  color: var(--color-pubg-primary);
}

.event-info {
  flex: 1;
}

.event-match {
  font-weight: 500;
  margin-bottom: 0.3rem;
}

.event-type {
  font-size: 0.9rem;
  color: #777;
}

.rankings-section {
  margin-bottom: 3rem;
}

.rankings-table {
  overflow-x: auto;
}

.rankings-table table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.rankings-table th,
.rankings-table td {
  padding: 1.2rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.rankings-table th {
  background-color: var(--color-pubg-primary);
  color: white;
  font-weight: 500;
}

.rankings-table tr:hover {
  background-color: #f9f9f9;
}

.rank-cell {
  font-weight: bold;
  color: var(--color-pubg-primary);
}

.team-cell {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.team-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.team-name {
  font-weight: 500;
}

.points-cell,
.winrate-cell {
  font-weight: 500;
}

.news-section {
  margin-bottom: 3rem;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 2rem;
}

.news-card {
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.news-image {
  height: 180px;
  background-size: cover;
  background-position: center;
}

.news-content {
  padding: 1.5rem;
}

.news-date {
  color: #777;
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
}

.news-title {
  font-size: 1.3rem;
  color: var(--color-heading);
  margin-bottom: 0.8rem;
}

.news-summary {
  color: var(--color-text);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.news-link {
  color: var(--color-pubg-primary);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s ease;
}

.news-link:hover {
  color: var(--color-pubg-primary-dark);
  text-decoration: underline;
}

.guide-section {
  margin-bottom: 2rem;
}

.guide-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.guide-item {
  background-color: white;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-top: 4px solid var(--color-pubg-primary);
}

.guide-item h3 {
  color: var(--color-pubg-primary);
  margin-bottom: 0.8rem;
  font-size: 1.2rem;
}

.guide-item p {
  color: var(--color-text);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }
  
  .tournament-cards,
  .tournament-calendar,
  .news-grid,
  .guide-content {
    grid-template-columns: 1fr;
  }
  
  .rankings-table {
    font-size: 0.9rem;
  }
  
  .rankings-table th,
  .rankings-table td {
    padding: 0.8rem;
  }
}
</style>